<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/product.css"/>
	</head>
	<body>
		<!-- 头部导航栏 -->
		<div class="top-header">
			<a href="../register.html" class="top-item" style="color: #888888;">注册</a>
			<a href="../login.html" class="top-item" style="color: #888888;">登录</a>
		</div>
		
		<!-- 头部搜索栏 -->
		<div class="bottom-header">
			<div class="bottom-content">
				<div style="flex: 1;">
					<a href="../index.html">
					<img src="../img/logo.gif" width="157" height="50">
					</a>
				</div>
				<div style="flex: 2; text-align: center;">
					<input type="text" placeholder="请输入查询关键词" class="bottom-header-input"/>
					<button type="button" class="bottom-header-btn">搜索</button>
				</div>
				<div  class="cart-btn" style="flex: 1; text-align: right; position: relative;">
					<a href="../cart.html">
						<img src="../img/Shopping-cart-1@3x.png" width="20" height="20">
					</a>
					<div class="cart-box">
						
						<!-- 购物车头部 -->
						<h3>购物车</h3>
						
						<!-- 购物车中间 -->
						<div style="display: flex; align-items: center;">
							<div style="padding: 0px 10px;">
								<img src="../img/100.jpg" width="50" height="50">
							</div>
							<div style="font-size: 12px;">
								<p class="text-hidden">
									<span style="color: red;">1</span>
									<span>寻真水果 山东烟台栖霞红富士苹果16-24个 5kg 新鲜水果</span>
								</p>
								<p style="text-align: left; color: red;">0.7</p>
							</div>
						</div>
						
						<!-- 购物车底部 -->
						<div class="cart-bottom">
							<div class="left">
								<span>共:  ￥0.73</span>
							</div>
							<div class="right">
								<span style="color: white;">查看购物车</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 头部标题栏 -->
		<section class="product-header">
			<div class="product-content">
				<p>缤咕果园 海南红心火龙果6斤装约7个大果 红肉吉祥果新鲜水果</p>
			</div>
		</section>
		<div class="product-body product-content">
			<div style="display: flex;">
				<div class="product-details">
					<div class="product-picture">
						<div class="img-border">
							<img src="../img/102.jpg" width="235" height="235">
						</div>
					</div>
					<div class="product-main">
						<div class="product-price">
							<div>
								<span style="font-size: 15px; text-decoration: line-through; color: #999;">市场价:￥1.1</span>
								<b style="font-size: 20px;">￥1.0</b>
							</div>
							<div class="button button-star">
								<img class="before-img" src="../img/star1.png" width="14" height="14">
								<img class="after-img" src="../img/star2.png" width="14" height="14">
							</div>
						</div>
						<div class="divider"></div>
						<div class="product-price">
							<div>
								<b>商品简介</b>
							</div>
							<div style="display: flex; align-items: center;">
								<img src="../img/ok.png" width="14" width="14">
								<span style="color: #8AD8AF; font-size: 300;">有货</span>
							</div>
						</div>
						<div style="margin: 20px;">缤咕果园 海南红心火龙果6斤装约7个大果 红肉吉祥果新鲜水果</div>
						<div class="divider"></div>
						<div class="product-bottom">
							<div class="product-quantity">
								<span style="width: 80px;">购买数量:</span>
								<div class="input-number">
									<span class="input-number-operation">-</span>
									<input class="input-number-center" type="text" value="1"/>
									<span class="input-number-operation">+</span>
								</div>
							</div>
						</div>
						<div class="product-bottom">
							<div class="product-btn">
								<a href="../cart.html">
									<div class="button btn-add">加入购物车</div>
								</a>
								<div class="button btn-buy">立即购买</div>
							</div>
						</div>
					</div>
				</div>
				<div class="product-hotSale">
					<b style="font-size: 16px;">热销商品</b>
					<div class="hotSale-divider"></div>
					<div class="hotSale-product">
						<img class="img-border" src="../img/102.jpg" width="80" height="80">
						<div style="margin-left: 5px;">
							<a href="pltaya.html" style="font-size: 12px;">
								缤咕果园 海南红心火龙果6斤装约7个大果 红肉吉祥果新鲜水果
							</a>
							<p style="font-size: 18px;">￥1.0</p>
							<p style="font-size: 15px; text-decoration: line-through;">市场价￥1.3</p>
						</div>
					</div>
					<div class="hotSale-product">
						<img class="img-border" src="../img/20.jpg" width="80" height="80">
						<div style="margin-left: 5px;">
							<a href="" style="font-size: 12px;">
								寻真水果 山东烟台栖霞红富士苹果16-24个 5kg 新鲜苹果
							</a>
							<p style="font-size: 18px;">￥0.7</p>
							<p style="font-size: 15px; text-decoration: line-through;">市场价￥1.0</p>
						</div>
					</div>
				</div>
			</div>
			<div class="product-description">
				<div style="border-bottom: 1px solid #ddd;">
					<span class="product-desc">商品描述</span>
					<span class="product-review">商品评论(3)</span>
					</div>
					<div style="margin: 20px 0;">缤咕果园 海南红心火龙果6斤装约7个大果 红肉吉祥果新鲜水果</div>
			</div>

		</div>
	
		<!-- 底部 -->
		<div class="footer">
			<p style="color: white;">全国高职院校Web应用软件开发技能竞赛</p>
		</div>
	</body>
</html>
